<template>
  <div class="layui-tab-item">
    <div class="layui-card">
      <div
        class="layui-form layui-card-header layuiadmin-card-header-auto"
        style="padding: 15px 15px 0px 15px"
      >
        <div class="layui-row">
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">流程实例ID</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="process.id"
                  placeholder="请输入用户名"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">流程定义Key</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="process.key"
                  placeholder="请输入流程名称"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label" style="padding: 0"
                ><button class="layui-btn" lay-filter="search">
                  <i
                    class="layui-icon layui-icon-search layuiadmin-button-btn"
                  ></i></button
              ></label>
            </div>
          </div>
        </div>
        <div class="layui-card-body">
          <div style="padding-bottom: 10px">
            <button
              class="layui-btn layui-btn-sm layui-btn-danger"
              layui-delete="deleteModel"
              field="id"
              table=" "
            >
              <i class="layui-icon">&#xe640;</i>
              删除所选流程
            </button>
          </div>
          <table id="runtimeDataTable"></table>
        </div>
      </div>
    </div>
    <div id="runtimeBar" style="display: none">
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        >删除</a
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "RuntimeProcessList",
  data: function () {
    return {
      process: {},
      cols: [
        [
          {
            type: "checkbox",
            field: "id",
            align: "center",
          },
          {
            field: "id",
            title: "执行ID",
            align: "center",
          },
          {
            field: "processInstanceId",
            title: "流程实例ID",
            align: "center",
          },
          {
            field: "processDefinitionId",
            title: "流程定义ID",
            align: "center",
          },
          {
            field: "category",
            title: "当前环节",
            align: "center",
          },
          {
            field: "suspended",
            title: "是否挂起",
            align: "center",
          },
          {
            fixed: "right",
            title: "操作",
            align: "center",
            toolbar: "#runtimeBar",
          },
        ],
      ],
    };
  },
  mounted: function () {
    this.initLayui();
    this.queryRuntimeProcess();
  },
  methods: {
    queryRuntimeProcess: function (where) {
      if (this.checkIsNull(where)) {
        where = {};
      }
      var obj = {};
      obj.url = this.activitiRuntime + "/runtimeProcessList";
      obj.cols = this.cols;
      obj.tableId = "runtimeDataTable";
      obj.where = where;
      this.renderTable(obj); //其中url tableId以及cols为必传其他参数个性化参数请参考layui数据表格
    },
  },
};
</script>